<template>
  <div class="app-container">
    {{pingjiao_name}}
    <el-tabs v-model="tabName" @tab-click="tabClick">
      <el-tab-pane v-if="checkPermission(['/pingjiao/Pingjiao_zhibiao/list'])" label="指标管理" name="zhibiao">
        <pingjiao-zhibiao :pingjiao_id="pingjiao_id" v-if="zhibiao" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(['/pingjiao/Pingjiao_dengdi/list'])" label="等第管理" name="dengdi">
        <pingjiao-dengdi :pingjiao_id="pingjiao_id" v-if="dengdi" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(['/pingjiao/Pingjiao_content/listPingjiaoTongji'])" label="评教统计" name="tongji">
        <pingjiao-tongji :pingjiao_id="pingjiao_id" v-if="tongji" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(['/pingjiao/Pingjiao_content/listPingjiaoState'])" label="评教状态" name="state">
        <pingjiao-state :pingjiao_id="pingjiao_id" v-if="state" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import screenHeight from '@/utils/screen-height'
  import checkPermission from '@/utils/permission' // 权限判断函数
  import PingjiaoZhibiao from './components/PingjiaoZhibiao'
  import PingjiaoDengdi from './components/PingjiaoDengdi'
  import PingjiaoTongji from './components/PingjiaoTongji'
  import PingjiaoState from './components/PingjiaoState'

  export default {
    name: 'PingjiaoManage',
    components: {
      PingjiaoZhibiao,PingjiaoDengdi,PingjiaoTongji,PingjiaoState
    },
    data() {
      return {
        zhibiao: true,
        dengdi: false,
        tongji: false,
        state: false,
        tabName: 'zhibiao',
        pingjiao_id: this.$route.query.id,
        pingjiao_name: this.$route.query.name
      }
    },
    created() {
      this.height = screenHeight()
    },
    methods: {
      checkPermission,
      tabClick(tab) {
        this[tab.name] = true
      }
    }
  }
</script>
